<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
    <style>
      body {
        /* background-image: url('http://img.badapple.top/东方Project/十六夜咲夜/img (7).jpg') */
      }
    </style>
  </head>
  <body>
    <img src="./img/header.png" alt="" class="header" />
    <div class="cq-wrap">
      <!-- 导航 -->
      <div class="nav">
        <ul>
          <li><img src="./img/sword.png" alt="" /><span>剑士</span></li>
          <li><img src="./img/knight.png" alt="" /> <span>骑士</span></li>
          <li><img src="./img/Archer.png" alt="" /> <span>弓手</span></li>
          <li><img src="./img/hunter.png" alt="" /> <span>猎人</span></li>
          <li><img src="./img/magic.png" alt="" /> <span>法师</span></li>
          <li><img src="./img/flamen.png" alt="" /> <span>祭司</span></li>
        </ul>
      </div>
      <!-- table -->
      <table class="cq-list">
        <thead>
          <th>勇士</th>
          <th>技能</th>
          <th>武器</th>
        </thead>
        <tbody>
          <tr>
            <td>
              <img
                class="icon"
                src="http://p6.qhimg.com/dr/72__/t01b8063ea608652431.png"
                alt=""
              />
              <span>
                涅斯军长官尤莉娅
              </span>
            </td>
            <td>
              <img
                class="skill"
                src="http://p9.qhimg.com/dr/52__/t01087d8e61575ab25d.png"
                alt=""
              />
              注射!
            </td>
            <td>
              <img
                class="weapon"
                src="http://p6.qhimg.com/dr/45__/t0178ac936dcb72650f.png"
                alt=""
              />
              疫苗-G
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 遮罩层 -->
    <div class="cover" style="display: none">
      <img class="loading" src="./img/loading01.gif" alt="" />
    </div>
  </body>
</html>
<script src="./js/jquery-1.12.4.min.js"></script>
<!-- 导入模板引擎 -->
<script src="./js/template-web.js"></script>
<!-- 准备模板 -->
<script type="text/html" id="hero">
  {{each  heros}}
  <tr>
    <td>
      <img
        class="icon"
        src={{$value.heroIcon}}
        alt=""
      />
      <span>
        {{$value.heroName}}
      </span>
    </td>
    <td>
      <img
        class="skill"
        src={{$value.skillIcon}}
        alt=""
      />
      {{$value.skillName}}
    </td>
    <td>
      <img
        class="weapon"
        src={{$value.weaponIcon}}
        alt=""
      />
      {{$value.weaponName}}
    </td>
  </tr>
  {{/each}}
</script>
<script>
  /*
    随机背景图
    - 请求地址:http://acg.bakayun.cn/randbg.php
    - 请求方法：get
    - 请求参数：Type,t,https
    步骤
    1. 打开网页之后，调用随机二次元图片的接口
    2. 数据获取到之后设置给body的背景图即可
    3. 使用定时器间隔获取即可

    点击高亮tab
      步骤

      1. 绑定点击事件，那一排tab
      2. 为点击的添加 active  类
      3. 移除他兄弟的 active 类
      4. 默认点中第一个 调用第一个的点击事件

    底部内容跟随tab切换

    - 请求地址：https://autumnfish.cn/api/cq/category
    - 请求方法：get
    - 请求参数：type，剑士，骑士，弓手，猎人，法师，祭司

    步骤

    1. tab的点击事件中 ajax调用接口
    2. 数据回来之后渲染到页面上

    点击头像看酷炫效果

    - 请求地址：https://autumnfish.cn/api/cq/gif
    - 请求方法：get
    - 请求参数：name

    步骤

    1. 点击英雄头像
    2. 弹出遮罩层  有loading动画
    3. 获取该英雄对应的gif图
    4. 获取到之后，设置到遮罩层中的img的src上即可
    5. 双击关闭遮罩层

  */


  // 初始加载

  window.onload = function(){

    init()

    
  }

  // 初始化
  function init(){

      var nav = document.querySelector(".nav");
      var navLi = nav.getElementsByTagName("li");
      var tbody = document.querySelector(".cq-list").getElementsByTagName("tbody")[0];
      var cover = document.querySelector(".cover");

      var skillGif = cover.cloneNode(true)


      // console.log(skillGif , "111111111");

      // console.log('tbody----' , tbody[0]);
      var t = nav.firstElementChild.firstElementChild;
      var span = t.lastElementChild;
      t.className = "active"
      var spanText = span.innerHTML;

      //  动态绑定

      // console.log(navLi);

      for(var i =0; i < navLi.length ; i++){
        navLi[i].onclick = function(){
          // i 不可用

          $(this).addClass("active").siblings("li").removeClass("active")

          //  请求相应的数据
          spanText = $(this).find("span").html()
          // console.log(spanText,"=--=-=-=");
          getHeroInfo(spanText,cover,tbody)
        }
      }

      // 请求数据

      getHeroInfo(spanText,cover,tbody,function(data){
          // 拿到所有ICON  绑定事件 
         // 事件被触发 --->  skill图片

        var res = template("hero",{
          heros : data
        });

        tbody.innerHTML = res

        var iconArr  = tbody.getElementsByClassName("icon")
        // console.log(tbody , iconArr);

        for(var i = 0 ; i < iconArr.length ; i++){
            iconArr[i].onclick = function(){
              spanText = $(this).siblings("span").text();

              spanText = spanText.replace(/\s/g,"")

              // console.log(spanText);
              // ajax
              var xhr = new XMLHttpRequest();

              xhr.open("GET","https://autumnfish.cn/api/cq/gif?name=" + spanText )

              // loading
              // cover.style.display = "block"
              setLoading(cover,true)
              xhr.send()

              xhr.onload = function(){
                setLoading(cover)
                // console.log(xhr.responseText,"=-=-=-0987654567890-");

                var  data = JSON.parse(xhr.responseText)

                console.log(data["data"]["skillGif"]);

                // 遮罩   img  src   = data["data"]["skillGif"]
                // 支持关闭 （点击空白区域）

             
                skillGif.getElementsByTagName("img")[0].src = data["data"]["skillGif"]

                // console.log("skilicon" , skillGif.getElementsByTagName("img")[0]);
                document.body.appendChild(skillGif)
                // 不cloneNode ，单纯的改变 cover下img的src ，关闭遮罩时，再将src路径改回
                skillGif.style.display = "block"
              }
            }
        }

      })



      
    }

  function getHeroInfo(spanText,cover,tbody,fn){

      var xhr = new XMLHttpRequest();

      xhr.open("GET","https://autumnfish.cn/api/cq/category?type=" + spanText)

      // loading
      // cover.style.display = "block"
      setLoading(cover,true)
      xhr.send()

      xhr.onreadystatechange = function(){
        if(xhr.status == 200 && xhr.readyState == 4){
            // onload
            // 取消loading
            // cover.style.display = "none"
            setLoading(cover)

            var  data = JSON.parse(xhr.responseText);

            data = data["data"]["heros"]

            // console.log(data);

            if(fn){
                // var targetIcon = $(tbody).find("tr td .icon")
                // console.log(targetIcon);
                fn(data)
            }

            // var res = template("hero",{
            //   heros : data
            // });

            // tbody.innerHTML = res

            // console.log(res);
        }
      }
    }



  function setLoading(el,bool){
      if(bool){
        el.style.display = "block"
      }else{
        el.style.display = "none"
      }
    }



  
</script>


前端  后端

前台  后台